<template>
  <div class="common-layout" :class="{ 'sidebar-collapsed': isSidebarCollapsed }">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isSidebarCollapsed ? '64px' : '200px'" class="aside">
        <div class="logo">
          <!-- <img src="/logo.png" alt="宠物商店后台" class="logo-img" /> -->
          <span v-if="!isSidebarCollapsed" class="logo-text">宠物商店后台</span>
        </div>

        <!-- 菜单 -->
        <el-menu router :default-active="activeMenu" class="menu" :collapse="isSidebarCollapsed"
          :collapse-transition="false" background-color="var(--sidebar-bg-color)" text-color="var(--sidebar-text-color)"
          active-text-color="var(--sidebar-active-text-color)">
          <el-menu-item index="/dashboard">
            <el-icon><el-icon-menu /></el-icon>
            <span>仪表盘</span>
          </el-menu-item>

          <!-- 商品管理 -->
          <el-sub-menu index="/product">
            <template #title>
              <el-icon><el-icon-goods /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/product/list">商品列表</el-menu-item>
            <el-menu-item index="/product/add">添加商品</el-menu-item>
          </el-sub-menu>

          <!-- 商店管理 -->
          <el-sub-menu index="/store">
            <template #title>
              <el-icon><el-icon-shop /></el-icon>
              <span>商店管理</span>
            </template>
            <el-menu-item index="/store/list">商店列表</el-menu-item>
            <el-menu-item index="/store/add">添加商店</el-menu-item>
          </el-sub-menu>

          <!-- 视频管理 -->
          <el-sub-menu index="/video">
            <template #title>
              <el-icon><el-icon-video-camera /></el-icon>
              <span>视频管理</span>
            </template>
            <el-menu-item index="/video/list">视频列表</el-menu-item>
            <el-menu-item index="/video/add">上传视频</el-menu-item>
          </el-sub-menu>

          <!-- 会员管理 -->
          <el-menu-item index="/user/list">
            <el-icon><el-icon-user /></el-icon>
            <span>会员管理</span>
          </el-menu-item>

          <!-- AI对话管理 -->
          <el-menu-item index="/chat/list">
            <el-icon><el-icon-chat-dot-round /></el-icon>
            <span>AI对话管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container class="main-container">
        <!-- 顶部导航 -->
        <el-header class="header">
          <div class="left">
            <el-icon class="toggle-btn" @click="toggleSidebar">
              <el-icon-fold v-if="!isSidebarCollapsed" />
              <el-icon-expand v-else />
            </el-icon>
            <el-breadcrumb>
              <el-breadcrumb-item v-for="item in breadcrumbItems" :key="item.path" :to="{ path: item.path }">
                {{ item.meta.title }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="right">
            <el-dropdown trigger="click">
              <div class="avatar-wrapper">
                <el-avatar :size="30" :src="logo"></el-avatar>
                <span class="username">管理员</span>
                <el-icon><el-icon-arrow-down /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <!-- 主要内容区域 -->
        <el-main class="main">
          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <component :is="Component" :key="$route.fullPath" />
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Menu as ElIconMenu,
  Fold as ElIconFold,
  Expand as ElIconExpand,
  ArrowDown as ElIconArrowDown,
  User as ElIconUser,
  VideoCamera as ElIconVideoCamera,
  Goods as ElIconGoods,
  ChatDotRound as ElIconChatDotRound,
  Shop as ElIconShop,
} from '@element-plus/icons-vue'
import logo from '../assets/images/logo.png'
import { logout } from '../api/user'

const router = useRouter()
const route = useRoute()

const isSidebarCollapsed = ref(false)

// 当前激活的菜单项
const activeMenu = computed(() => route.path)

// 生成面包屑数据
const breadcrumbItems = computed(() => {
  const matched = route.matched.filter(item => item.meta && item.meta.title)
  // 我们通常不在面包屑中显示根路由
  if (matched.length > 0 && matched[0].path === '/') {
    return matched.slice(1);
  }
  return matched;
})

// 切换侧边栏
const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
}

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确认退出系统吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      logout().then(() => {
        localStorage.removeItem('token')
        router.push('/login')
        ElMessage({
          type: 'success',
          message: '退出成功',
        })
      })
    })
    .catch(() => {
      // 取消退出操作
    })
}
</script>

<style scoped>
.common-layout {
  height: 100vh;
  display: flex;
  background: var(--main-bg-color);
}

.aside {
  background-color: var(--sidebar-bg-color);
  color: var(--sidebar-text-color);
  transition: width 0.28s;
  overflow-x: hidden;
  border-right: 1px solid var(--border-color-light);
}

.logo {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  background-color: var(--sidebar-bg-color);
  /* 与侧边栏背景色一致 */
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-color-light);
}

.logo-img {
  height: 32px;
  margin-right: 12px;
  flex-shrink: 0;
}

.logo-text {
  font-size: 18px;
  /* 稍微调大字体 */
  font-weight: 600;
  color: var(--el-color-primary);
  /* 使用主题色 */
  transition: opacity 0.3s;
}

.sidebar-collapsed .logo-text {
  opacity: 0;
}

.menu:not(.el-menu--collapse) {
  width: var(--sidebar-width);
}

.el-menu-item:hover,
.el-sub-menu__title:hover {
  background-color: #ecf5ff !important;
  /* 使用一个淡蓝色作为悬停背景 */
  color: var(--sidebar-active-text-color) !important;
}

.main-container {
  display: flex;
  flex-direction: column;
  transition: margin-left 0.28s;
}

.header {
  height: var(--header-height);
  background-color: var(--header-bg-color);
  box-shadow: var(--box-shadow-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-color-light);
}

.left {
  display: flex;
  align-items: center;
}

.toggle-btn {
  font-size: 22px;
  cursor: pointer;
  margin-right: 15px;
  transition: transform 0.3s;
}

.toggle-btn:hover {
  transform: scale(1.1);
}

.right {
  display: flex;
  align-items: center;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.avatar-wrapper:hover {
  background-color: #f5f5f5;
}

.username {
  margin: 0 8px;
  font-size: 14px;
}

.main {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
}

/* 页面切换动画 */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>